/* eslint-disable no-unused-vars */
import "./index.css"
import list from "./data.js"
let ul = document.querySelector('.content > ul');
let prevBtn = document.querySelector('.prev');
let nextBtn = document.querySelector('.next');
// let totalBox = document.querySelector('.total');
// let selectBox = document.querySelector('select');
let select = document.querySelector("select");
      let total = document.querySelector(".total");
      // 获取数据长度
      let dataLength = list.length;
      // 获取分页数量
      let num = select.value;
      // 初始化第一页
      let pageNum = 1;
      // 初始化最后一页
      let pageAll = Math.ceil(dataLength / num);
      render();
      btnBool();
      function render() {
        // 当要渲染时先获取每页的数量
        // 将分页总页数渲染
        num = select.value;
        pageAll = Math.ceil(dataLength / num);
        pageNum = Number(total.innerHTML.slice(0, 1));
        total.innerHTML = `${pageNum} / ${pageAll}`;
        // 获取当前的页数
        // let innerStr = "";
        // 重置页面内容
        ul.innerHTML = "";
        // 将每页的内容渲染出来
        // 根据每页的个数和当前的页数进行数据选取
        // 注意：当前的数据不能大于数据的长度
        for (
          let i = (pageNum - 1) * num;
          i <= pageNum * num - 1 && i < list.length;
          i++
        ) {
          ul.innerHTML += `<li>
          <img
            src="${list[i].pic}"
            alt=""
          />
          <p>${list[i].name}</p>
          <p>城市: ${list[i].city}</p>
          <p>地址: ${list[i].address}</p>
          <p>价格: ${list[i].price}</p>
          <p>演出时间: ${list[i].showTime}</p>
        </li>
        `;
        }
      }
      // 选框更改时执行的内容
      select.addEventListener("change", function () {
        // 重置为第一页
        pageNum = 1;
        // 改变页数显示内容
        total.innerHTML = `${pageNum} / ${pageAll}`;
        render();
        btnBool();
      });
      // 点击前一页后渲染数字
      prevBtn.addEventListener("click", function () {
        pageNum = Number(total.innerHTML.slice(0, 1));
        pageAll = Math.ceil(dataLength / num);
        if (pageNum != 1) {
          // 当前的页数-1
          pageNum = pageNum - 1;
          pageAll = Math.ceil(dataLength / num);
          total.innerHTML = `${pageNum} / ${pageAll}`;
        }
        render();
        btnBool();
      });
      // 点击后一页后渲染数字
      nextBtn.addEventListener("click", function () {
        // 获取当前的页数
        pageNum = Number(total.innerHTML.slice(0, 1));
        // 获取最大的页数
        pageAll = Math.ceil(dataLength / num);
        // 不为最后一页就更新当前页数
        if (pageNum != pageAll) {
          pageNum = pageNum + 1;
          total.innerHTML = `${pageNum} / ${pageAll}`;
        }
        render();
        btnBool();
      });
      // 判断当前按钮是否能按
      function btnBool() {
        // 当前页数
        pageNum = Number(total.innerHTML.slice(0, 1));
        // 总页数
        pageAll = Math.ceil(dataLength / num);
        // 如果当前页数为1，则禁止左按钮
        if (Number(pageNum) === 1) {
          prevBtn.classList.add("disable");
        } else {
          prevBtn.classList.remove("disable");
        }
        // 如果单签页数为最后一页，禁止右按钮
        if (Number(pageNum) === pageAll) {
          nextBtn.classList.add("disable");
        } else {
          nextBtn.classList.remove("disable");
        }
      }